<!--
  功能：功能描述
  作者：zzb
  邮箱：2283325110@qq.com
  时间：2021年11月29日 09:46:03
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="container">
    <el-card class="box-card">
      <el-avatar class="user-avatar" :src="avatar">
        <img
          src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
        />
      </el-avatar>
      <div class="user-name">
        {{ userInfo.realName }}
      </div>
      <div class="detail-info">
        <div>
          <vab-icon class="icon" :icon="['fas', 'user']"></vab-icon>
          <span>{{ userInfo.userName }}</span>
        </div>
        <div>
          <vab-icon class="icon" :icon="['fas', 'venus']"></vab-icon>
          <span>{{ userInfo.gender }}</span>
        </div>
        <div>
          <vab-icon class="icon" :icon="['fas', 'splotch']"></vab-icon>
          <span>{{ userInfo.age }} 岁</span>
        </div>
        <div v-show="permissions[0] == 'editor'">
          <vab-icon class="icon" :icon="['fas', 'id-card']"></vab-icon>
          <span>{{ userInfo.card }}</span>
        </div>
        <div>
          <vab-icon class="icon" :icon="['fas', 'phone-alt']"></vab-icon>
          <span>{{ userInfo.phone }}</span>
        </div>
        <div v-show="permissions[0] == 'editor'">
          <vab-icon class="icon" :icon="['fas', 'map-marker-alt']"></vab-icon>
          <span>{{ userInfo.address }}</span>
        </div>
        <div
          v-show="permissions[0] == 'editor'"
          style="font-weight: 700; font-size: 16px"
        >
          疫苗接种情况:
          <div>
            第一针:
            <span v-if="firstPin">
              已接种
              <span>时间：{{ firstDate }}</span>
            </span>
            <span v-else>未接种</span>
          </div>
          <div>
            第二针:
            <span v-if="secondPin">
              已接种
              <span>时间：{{ secondDate }}</span>
            </span>
            <span v-else>未接种</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card2">
      <el-tabs v-model="activeName">
        <el-tab-pane label="资料编辑" name="first">
          <el-form
            ref="userInfo"
            :model="userInfo"
            :rules="rules"
            label-width="100px"
            size="mini"
          >
            <el-form-item label="昵称" prop="userName">
              <el-input v-model="userInfo.userName"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="userInfo.realName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="userInfo.password"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="userInfo.gender" placeholder="请选择性别">
                <el-option label="男" value="male"></el-option>
                <el-option label="女" value="female"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="userInfo.age"></el-input>
            </el-form-item>
            <el-form-item
              v-show="permissions[0] == 'editor'"
              label="身份证"
              prop="card"
            >
              <el-input v-model="userInfo.card"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="userInfo.phone"></el-input>
            </el-form-item>
            <el-form-item
              v-show="permissions[0] == 'editor'"
              label="地址"
              prop="address"
            >
              <el-input v-model="userInfo.address" type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('userInfo')">
                立即修改
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  import { showUserInfo, findUserHistory, doEdit } from '@/api/userList'
  import { mapGetters } from 'vuex'
  export default {
    // 组件名称
    name: 'PersonalCenter',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
      return {
        userInfo: {
          username: '',
          realName: '',
          gender: '',
          age: '',
          phone: '',
          password: '',
          card: '',
          address: '',
        },
        rules: {
          realName: [
            { required: true, message: '请输入你的姓名', trigger: 'blur' },
            {
              min: 2,
              max: 4,
              message: '长度在 2 到 4 个字符',
              trigger: 'blur',
            },
          ],
          userName: [
            { required: true, message: '请输入你的昵称', trigger: 'blur' },
            {
              min: 2,
              max: 4,
              message: '长度在 2 到 4 个字符',
              trigger: 'blur',
            },
          ],
          password: [
            { required: true, message: '请填写密码', trigger: 'blur' },
          ],
          phone: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
          age: [{ required: true, message: '请填写年龄', trigger: 'blur' }],
          address: [{ required: true, message: '请填写地址', trigger: 'blur' }],
        },
        activeName: 'first',
        firstPin: false,
        secondPin: false,
        firstDate: '',
        secondDate: '',
      }
    },
    // 计算属性
    computed: {
      ...mapGetters({
        avatar: 'user/avatar',
        username: 'user/username',
        permissions: 'user/permissions',
      }),
    },
    // 侦听器
    watch: {},
    // 以下是生命周期钩子
    /**
     * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
     */
    created() {
      this.showUserInfo(this.username)
    },
    /**
     * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
     * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
     */
    mounted() {},
    // 组件方法
    methods: {
      async showUserInfo(name) {
        const { data } = await showUserInfo(name)
        this.userInfo = data
        if (this.permissions[0] == 'editor') {
          let res = await findUserHistory(this.username)
          if (res.code == 200) {
            this.firstPin = res.data.firstPin == 1 ? true : false
            this.secondPin = res.data.secondPin == 1 ? true : false
            if (this.firstPin) this.firstDate = res.data.firstDate
            if (this.secondPin) this.secondDate = res.data.secondDate
          }
        }
      },
      submitForm(userForm) {
        this.$refs[userForm].validate((valid) => {
          if (valid) {
            this.updataUserInfo()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      async updataUserInfo() {
        const { msg } = await doEdit(this.userInfo)
        this.$baseMessage(msg, 'success')
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
  .box-card {
    width: 400px;
    text-align: center;
    margin-left: 10px;
    margin-top: 10px;
  }
  .box-card2 {
    width: 500px;
    margin-right: 30px;
    margin-top: 10px;
  }
  .user-avatar {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border-radius: 50%;
  }
  .user-name {
    font-size: 24px;
    margin-top: 15px;
    font-weight: 500;
  }
  .detail-info {
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    align-content: space-around;
    padding-left: 25%;
    padding-top: 20px;
  }
  .icon {
    margin-right: 10px;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
</style>
